<template>
  <div>
    <AModal
      v-bind="$attrs"
      width="600px"
      @close="modalEvent('close')"
      @ok="modalEvent('ok')"
      @open="modalEvent('open')"
      @cancel="modalEvent('cancel')"
    >
      <AForm ref="formRef" :model="form" auto-label-width>
        <ARow :gutter="10">
          <ACol>
            <AFormItem field="userName" label="用户名">
              <!--              :rules="[{ required: true, message: '请输入用户名' }]"-->
              <!--              :validate-trigger="['change', 'input', 'blur']"-->
              <AInput v-model="form.userName" placeholder="请输入用户名"></AInput>
            </AFormItem>
          </ACol>
          <ACol>
            <AFormItem
              field="userAccount"
              label="用户账号"
              :rules="[{ required: true, message: '请输入用户账号' }]"
              :validate-trigger="['change', 'input', 'blur']"
            >
              <AInput v-model="form.userAccount" placeholder="请输入用户账号"></AInput>
            </AFormItem>
          </ACol>
          <ACol>
            <AFormItem
              field="phoneNumber"
              label="手机号码"
              :rules="[{ required: true, message: '请输入手机号码' }]"
              :validate-trigger="['change', 'input', 'blur']"
            >
              <AInput v-model="form.phoneNumber" placeholder="请输入手机号码"></AInput>
            </AFormItem>
          </ACol>
          <ACol>
            <AFormItem
              field="userPassword"
              label="用户密码"
              :rules="[{ required: true, message: '请输入用户密码' }]"
              :validate-trigger="['change', 'input', 'blur']"
            >
              <AInputPassword v-model="form.userPassword" placeholder="请输入用户密码" />
            </AFormItem>
          </ACol>
          <ACol>
            <AFormItem field="isAdmin" label="角色类型">
              <ASelect v-model="form.isAdmin">
                <AOption label="管理员" :value="1"></AOption>
                <AOption label="生产人员" :value="2"></AOption>
                <AOption label="财务人员" :value="3"></AOption>
              </ASelect>
            </AFormItem>
          </ACol>
          <ACol>
            <AFormItem field="enable" label="员工状态">
              <ASelect v-model="form.enable">
                <AOption label="禁用" :value="0"></AOption>
                <AOption label="启用" :value="1"></AOption>
              </ASelect>
            </AFormItem>
          </ACol>
        </ARow>
      </AForm>
    </AModal>
  </div>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
import { useMenuState } from '@renderer/store'
import { deleteNullObject } from '@renderer/utils/data-processing'
import { AccountReq, AccountRes, editAccount } from '@renderer/api/userManage'

interface Props {
  [key: string]: any

  checkData?: Partial<AccountRes>
}

const props = withDefaults(defineProps<Props>(), {
  checkData: () => {
    return {}
  }
})
const emit = defineEmits(['update:visible', 'reload'])
const attrs = useAttrs()
const formRef = ref()
const form = ref<AccountReq>({
  userName: '',
  enable: 1,
  userAccount: '',
  phoneNumber: '',
  userPassword: '',
  isAdmin: 1
})
const menuParam = useMenuState()

// 弹窗事件
const modalEvent = (type: string) => {
  switch (type) {
    case 'ok':
      formRef.value.validate((errors: any) => {
        if (!errors) {
          // 新增
          if ((attrs.title as string).includes('新增')) {
            form.value.userId = undefined
          }
          editAccount(deleteNullObject(form.value)).then(() => {
            Message.success((attrs.title as string).includes('新增') ? '新增成功' : '修改成功')
            modalEvent('cancel')
            emit('reload')
          })
        }
      })
      break
    case 'close':
      menuParam.switchEditStatus(false)
      formRef.value.resetFields()
      emit('update:visible', false)
      break
    case 'open':
      Object.assign(form.value, props.checkData)
      menuParam.switchEditStatus(true)
      break
    case 'cancel':
      formRef.value.resetFields()
      emit('update:visible', false)
      menuParam.switchEditStatus(false)
      break
    default:
      break
  }
}
</script>
